<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性布局</title>
    <link rel="stylesheet" href="./css/9.26.css">
</head>
<body>
    <div class="nav">
        <span>Simple Magazine / News</span>
        <div> text size
            <img src="./img/img/icon-plus.gif">
            <img src="./img/img/icon-minus.gif">
        </div>
    </div>
    <div class="head">
        <ul>
            <li>News
                <div class="dropdown">
                    Frontpage Style Demo Two Columns Single Colun Archives Empty Page
                </div>
            </li>
            <li>Politics</li>
            <li>Culture</li>
            <li>Sport</li>
            <li>Debate</li>
            <li>Entertainment</li>
        </ul>
    </div>
    <div class="content">
        <div class="article">
            <h2>Template Information</h2>
            <p>18:11，Sunday, August 2，2009 by Viktor Persson ”2</p>
            <img src="./img/img/news-image-big.jpg">
            <p>This is a free website template by Arcsin, built using tab16less XHTML and CSS.</p>
            <p>This tenplate is distributed under a Creative Conmons Attribution 2. 5
                License, which al1ows you to use and nodify it for any purpose (per sonal
                and comnercial), under the condition that you keep the provided credit
                links in the footer.
            </p>
            <p>The latest t emplate version and CMS conversions for platforms such as
                WordPress and Blogger can be found atthe official page.
            </p>
            <p>For more templates, questions and comments please visit Arcsin Web Templat es. .</p>
            <p>Have fun!</p>
            <p>Read more》</p>
            <div class="photo">
                 <img src="./img/img/news-image-med-1.jpg" >
                 <img src="./img/img/news-image-med-2.jpg" >
                 <img src="./img/img/news-image-med-3.jpg" >
            </div>
            <div class="ph_nr">
                <h3>
                    Curabitur justo ar Cu
                </h3>
                <p>Bibendun at bi bendum in,
                    semper nec ibh.
                </p>
            </div>
            <div class="ph_nr">
                <h3>
                    Curabitur justo ar Cu
                </h3>
                <p>Bibendun at bi bendum in,
                    semper nec ibh.
                </p>
            </div>
            <div class="ph_nr">
                <h3>
                    Curabitur justo ar Cu
                </h3>
                <p>Bibendun at bi bendum in,
                    semper nec ibh.
                </p>
            </div>
        </div>
        <div class="section">
            <div class="section_left">
                <div>
                    <img src="./img/img/news-image-small-1.jpg" >
                    <h3>Article title</h3>
                    <p>
                        Integer dian elit, condimentumac semper ut，tinci dunt non
                        diam. Ut congue rutrum justo at commodo. Aenean eui smod
                        tinci dunt lorem scelerisque eui smod.
                        Rend more》
                    </p>
                </div>
                <div>
                    <img src="./img/img/news-image-small-2.jpg" >
                    <h3>Article title</h3>
                    <p>
                        Integer dian elit, condimentumac semper ut，tinci dunt non
                        diam. Ut congue rutrum justo at commodo. Aenean eui smod
                        tinci dunt lorem scelerisque eui smod.
                        Rend more》
                    </p>
                </div>
                <div>
                    <h3>Article title</h3>
                    <p>
                        Integer dian elit, condimentumac semper ut，tinci dunt non
                        diam. Ut congue rutrum justo at commodo. Aenean eui smod
                        tinci dunt lorem scelerisque eui smod.
                        Rend more》
                    </p>
                </div>
            </div>
            <div class="section_right">
                <ul>
                    <li>Latest News</li>
                    <li>Aenean tempor ar cu. .</li>
                    <li>Justo interdum rutrum</li>
                    <li>In nec justo in urna</li>
                    <li>Accumsan condi mentum</li>
                    <li>Eti am commodo bi bendum</li>
                    <li>Mauris eui smod justo</li>
                    <li>Browse a1l》</li>
                </ul>
                <ul>
                    <li>Latest News</li>
                    <li>Aenean tempor ar cu. .</li>
                    <li>Justo interdum rutrum</li>
                    <li>In nec justo in urna</li>
                    <li>Accumsan condi mentum</li>
                    <li>Eti am commodo bi bendum</li>
                    <li>Mauris eui smod justo</li>
                    <li>Browse a1l》</li>
                </ul>
                <ul>
                    <li>Latest News</li>
                    <li>Aenean tempor ar cu. .</li>
                    <li>Justo interdum rutrum</li>
                    <li>In nec justo in urna</li>
                    <li>Accumsan condi mentum</li>
                    <li>Eti am commodo bi bendum</li>
                    <li>Mauris eui smod justo</li>
                    <li>Browse a1l》</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="foot_nr"> 
            <h3>About Simple Magazine</h3>
            <p>Lorem ipsum dolor sit amet,</p>
            <p>consectetur adipiscing elit.</p>
            <a href="#">Learn more》</a>
        </div>
        <div class="foot_nr"> 
            <h3>Follow Us (RSS) </h3>
            <a href="#">Lorem ipsum</a>
            <a href="#">Dolor sit amet</a>
            <a href="#">Consectetur</a>
            <a href="#">Adipicing elit</a>
        </div>
        <div class="foot_nr"> 
            <h3>Help & Support</h3>
            <p>Quam velit dapibus quam, ornare</p>
            <p>suscipit tortor nisl ut tellus. </p>
            <a href="#">Frequently Asked Questions 0AQ)》</a>
        </div>
        <div class="foot_nr"> 
            <h3>Get in t ouch</h3>
            <p>Phone: +12 3456 7890</p>
            <p>Email: dolor@sit. amet</p>
            <a href="#">Online contact form 》</a>
        </div>
    </div>
    <div class="end">
        <div>Simple Magazine-></div>
        <div>
            <ul>
                <li>Home |</li>
                <li>News |</li>
                <li>Politics |</li>
                <li>Culture |</li>
                <li>Debate |</li>
                <li>Sport |</li>
                <li>Entertai nment</li>
            </ul>
        </div>
        <div>Popular free web templates at</div>
        <div>Website template by Arcsin</div>
    </div>
    <div class="over">
        wwwy. Websi teT emplates0rline. com. Impressive Flash Templates for Websites.
    </div>
</body>
</html>